<template>
	<view>
		<u-navbar title="设置" title-color="#FFF" :background="navBackground" :is-fixed="true" :border-bottom="false" :is-back="true" back-icon-color="#FFF"></u-navbar>
		<u-cell-group>
			<u-cell-item title="头像" :arrow="false"><u-avatar slot="right-icon" :src="userInfo.avatarUrl" size="80" @click="chooseAvatar"></u-avatar></u-cell-item>
			<u-cell-item title="昵称" :arrow="false"><input slot="right-icon" type="text" v-model="userInfo.nickName" class="ipt" /></u-cell-item>
		</u-cell-group>
		<view class="save-btn z-fixed d-flex-center radius-20" @click="saveUserinfo">
			<text>保存</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBackground: this.$navBackground,
			userInfo: '',
			avatarUrlChange:false,//判断头像是否修改
		};
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo');
	},
	created() {
		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', path => {
			this.userInfo.avatarUrl = path;
			this.avatarUrlChange = true;
			// 上传到服务端
			// uni.uploadFile({
			// 	url: 'http://www.example.com/upload',
			// 	filePath: path,
			// 	name: 'file',
			// 	complete: res => {
			// 		console.log(res);
			// 	}
			// });
		});
	},
	methods: {
		// 点击头像
		headhandle() {
			let _this = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'],
				success: function(res) {
					let imgPath = res.tempFilePaths[0];
					_this.userInfo.avatarUrl = imgPath;
				}
			});
		},
		chooseAvatar() {
			console.log(1);
			// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
			this.$u.route({
				// 关于此路径，请见下方"注意事项"
				url: '/pages/other/u-avatar-cropper/u-avatar-cropper',
				// 内部已设置以下默认参数值，可不传这些参数
				params: {
					// 输出图片宽度，高等于宽，单位px
					destWidth: 200,
					// 裁剪框宽度，高等于宽，单位px
					rectWidth: 200,
					// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					fileType: 'jpg'
				}
			});
		},
		// 保存修改
		saveUserinfo(){
			uni.showLoading();
			if(this.avatarUrlChange){
				let _this = this;
				uni.getImageInfo({
					src: _this.userInfo.avatarUrl,
					success(image) {
						// 上传头像到云存储
						uniCloud.uploadFile({
							filePath: image.path,
							cloudPath: Date.now() + '.' + image.type,
							success(uploadRes) {
								_this.userInfo.avatarUrl = uploadRes.fileID;
								_this.uploadUserinfo();
							},
							fail(err) {
								uni.hideLoading();
								_this.$tools.showToast('头像上传失败');
							}
						});
					},
					fail(err) {
						uni.hideLoading();
						_this.$tools.showToast('获取图片失败');
					}
				});
			}else{
				this.uploadUserinfo();
			}
		},
		// 更新用户信息
		uploadUserinfo(){
			this.$cloudApi.call({
				name: 'updateuserinfo',
				data: {
					userInfo: this.userInfo
				},
				success: res => {
					this.userInfo = res.userInfo;
					uni.setStorageSync('userInfo', res.userInfo);
					this.$tools.showToast('保存成功');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.ipt {
	text-align: right;
}
.save-btn{
	height: 90rpx;
	border-radius: 45rpx;
	background: $tian-main-color;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #ffffff;
	font-weight: bold;
	bottom: 200rpx;
	left: 32rpx;
	right: 32rpx;
}
</style>
